<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章管理</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
    <script src="/static/js/axios.js"></script>
    <script src="https://unpkg.com/vue@2.7.16/dist/vue.min.js"></script>
    <script src="/static/js/server.js"></script>
</head>

<body>
    <div id="app" class="container">
        <div class="d-flex justify-content-between align-items-center pb-3 border-bottom">
            <h1 class="mt-4">博客管理系统</h1>
            <div class="d-flex flex-row">
                <div class="d-flex flex-row">
                    <div style="position: relative;">
                        <img class="rounded-circle border border-2" :src="avatar_url" style="width: 50px;height: 50px;">
                        <input class="input-file" type="file" accept=".png, .jpg, .jpeg" @change="handleFileUpload" />
                    </div>

                    <div class="d-flex flex-column mx-2" style="max-width: 200px;">
                        <span>账号:{{info.account}}</span>
                        <span>用户名称:{{info.nikename}}</span>
                    </div>
                    <a class="text-primary" onclick="window.location.replace('/app/view/login.html')">退出</a>
                </div>
                <div class="gray-btn" @click="garyTap">{{garyMode ? "灰" : "正"}}</div>
            </div>

        </div>
        <div class="mt-4">
            <button class="btn btn-primary" @click="queryArticle">查询文章</button>
            <a class="btn btn-primary" href="/app/view/add.html">添加文章</a>
            <a class="btn btn-primary" href="/app/view/tag.html">标签管理</a>
            <a class="btn btn-primary" @click="exportData">导出数据</a>
            <div class="btn btn-primary" style="position: relative;">
                导入数据
                <input class="input-file" type="file" accept=".xlsx,xls" @change="handleFileDataUpload" />
            </div>
            <button class="btn btn-primary" @click="recoverData">恢复数据</button>
        </div>
        <div class="mt-4 d-flex flex-row align-items-center">
            <label class="form-label">文章搜索</label>
            <input type="text" class="mx-2 form-control w-75" placeholder="请输入文章名称" v-model="articleSearch">
            <button class="btn btn-primary" @click="searchArticle">查询</button>
        </div>
        <div class="table-responsive mt-4">
            <table class="table table-bordered table-hover">
                <thead>
                    <tr class="text-center">
                        <th>标题</th>
                        <th>标签</th>
                        <th>简介</th>
                        <th>内容</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in articles" :key="item.id" style="max-height:50px;">
                        <td class="col-2">{{item.title}}</td>
                        <td class="col-2">{{item.tag_name}}</td>
                        <td class="col-2">{{item.intro}}</td>
                        <td>
                            <div style="max-height: 100px;overflow: auto;">{{item.content}}</div>
                        </td>
                        <td class="col-2">
                            <a class="btn btn-primary" @click="deleteArticle(item.id)">删除</a>
                            <a class="btn btn-primary" @click="editArticle(item.id)">修改</a>
                        </td>
                    </tr>
                </tbody>
            </table>
            <ul class="pagination" v-show="totalPage > 1">
                <li class="page-item" :class="curPage == 1 ? 'disabled' : ''"><a class="page-link"
                        @click="previoutEvent">Previous</a></li>
                <li class="page-item" v-for="index in totalPage" :class="curPage == index ? 'active' : ''"><a
                        class="page-link" @click="pageEvent(index)">{{index}}</a></li>
                <li class="page-item" :class="curPage == totalPage ? 'disabled' : ''"><a class="page-link"
                        @click="nextEvent">Next</a></li>
            </ul>
            <div v-show="tipMessage.length > 0"
                class="position-fixed top-2 alert alert-danger alert-dismissible fade show">
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                {{tipMessage}}
            </div>
        </div>

    </div>
</body>
<script>
    var vueObj = new Vue({
        el: '#app',
        data: {
            garyMode: false,
            info: { account: "test", nikename: "张三", avatar_url: "" },
            avatar_url: "",
            articleSearch: "",
            totalPage: 0,
            curPage: 1,
            articles: [],
            tipMessage: "",
        },
        created() {
            this.queryArticle();
            this.getUserInfo();
        },
        methods: {
            getUserInfo() {
                axios.get('http://127.0.0.1:8001/user/getUserInfo').then(res => {
                    this.info = res.data;
                    if (res.data.avatar_url) {
                        this.avatar_url = res.data.avatar_url
                    }
                })
            },
            handleFileUpload(e) {
                let file = e.target.files[0];
                let config = {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }
                let formData = new FormData()
                formData.append("file", file, "avatar.png")
                axios.post("http://127.0.0.1:8001/user/editAvatar", formData, config).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.avatar_url = res.data.url;
                        tipMessage = res.msg
                    }
                })
            },
            queryArticle() {
                axios.get(`http://127.0.0.1:8001/user/queryArticle?pageNum=${this.curPage}`).then(res => {
                    console.log(res);
                    this.totalPage = res.data.pageNum;
                    this.articles = res.data.articles;
                })
            },
            pageEvent(index) {
                this.curPage = index;
                this.queryArticle();
            },
            nextEvent() {
                this.curPage++;
                this.queryArticle();
            },
            previoutEvent() {
                this.curPage--;
                this.queryArticle();
            },
            deleteArticle(id) {
                axios.get('http://127.0.0.1:8001/user/removeArticle', {
                    params: {
                        aritileID: id
                    }
                }).then(res => {
                    this.queryArticle()
                    tipMessage = res.msg
                })
            },
            editArticle(id) {
                window.location.href = '/app/view/add.html?id=' + id;
            },
            searchArticle() {
                axios.get(`http://127.0.0.1:8001/user/searchArticle?content=${this.articleSearch}`).then(res => {
                    this.totalPage = res.data.pageNum;
                    this.articles = res.data.articles;
                })
            },
            // 导入数据
            handleFileDataUpload(e) {
                console.log(e);
                let file = e.target.files[0];
                let config = {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }
                let formData = new FormData()
                formData.append("file", file, file.name ?? 'export.xlsx')
                axios.post("http://127.0.0.1:8001/user/importData", formData, config).then(res => {
                    if (res.code == 200) {
                        this.queryArticle();
                    }
                })
            },
            // 导出数据
            exportData() {
                const data = this.articles.map(item => {
                    return {
                        title: item.title,
                        intro: item.intro,
                        content: item.content,
                        created_on: item.created_on,
                        created_by: item.created_by,
                        cover_img: item.cover_image,
                        tag_name: item.tag_name
                    }
                })
                axios.post('http://127.0.0.1:8001/user/exportData', data).then(res => {
                    console.log("导出成功" + JSON.stringify(res));
                    if (res.code == 200) {
                        let link = document.createElement('a')
                        link.style.display = 'none';
                        link.href = res.data;
                        link.target = '_blank';
                        link.setAttribute('download', '');
                        document.body.appendChild(link);
                        link.click()
                        document.body.removeChild(link);
                    }
                })
            },
            recoverData() {
                axios.get('http://127.0.0.1:8001/user/recoverData').then(res => {
                    if (res.code != 200) {
                        return
                    }
                    this.queryArticle()
                })
            },
            garyTap() {
                this.garyMode = !this.garyMode;
                let value = this.garyMode ? 'grayscale(1)' : 'grayscale(0)';
                document.body.style.filter = value;
            },

        }
    })
</script>
<style>
    .gray-btn {
        width: 30px;
        height: 30px;
        background-color: gray;
        border-radius: 50%;
        border: 2px solid rgb(40, 50, 232);
        color: white;
        text-align: center;
    }

    .input-file {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        opacity: 0%;
        background-color: red;
    }
</style>

</html>